<template>
  <div class="back-header">
    <span class="back-header-logo">
      <i class="iconfont icon-vue"></i>
      <i class="iconfont icon-icon-test"></i>
      <i class="iconfont icon-typescript"></i>
    </span>
    <span class="back-header-title">在线考勤系统</span>
    <el-dropdown class="back-header-dropdown">
      <el-badge :is-dot="isDot" class="back-header-outline">
        <el-icon :size="20">
          <Bell />
        </el-icon>
      </el-badge>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleNavigate('/apply')" v-if="newsInfo.applicant">有审批结果消息</el-dropdown-item>
          <el-dropdown-item @click="handleNavigate('/check')" v-if="newsInfo.approver">有审批请求消息</el-dropdown-item>
          <el-dropdown-item v-if="!newsInfo.applicant && !newsInfo.approver">暂无消息</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown class="back-header-dropdown">
      <el-space class="back-header-space back-header-outline">
        <el-avatar :src="(head as string)" /> {{ name }}
      </el-space>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
defineComponent({
  name: 'HeaderView'
})

const store = useStore()
const router = useRouter()

const head = computed(() => store.state.users.infos.head)
const name = computed(() => store.state.users.infos.name)
const newsInfo = computed(() => store.state.news.info)
const isDot = computed(() => (newsInfo.value.applicant || newsInfo.value.approver) as boolean)

const handleLogout = () => {
  store.commit('users/clearToken')
  setTimeout(() => {
    window.location.replace('/login')
  }, 500)
}

const handleNavigate = (path: string) => {
  router.push(path)
}
</script>

<style scoped lang="scss">
.back-header {
  font-size: 34px;
  display: flex;
  align-items: center;
  height: 100%;

  .back-header-logo {

    .icon-vue,
    .icon-icon-test,
    .icon-typescript {
      margin-right: 5px;
      font-size: inherit;
    }

    .icon-vue {
      color: green;
    }

    .icon-icon-test {
      color: #deb887;
    }

    .icon-typescript {
      color: blue;
    }
  }

  .back-header-title {
    margin-left: 30px;
    font-size: 18px;
    font-weight: 700;
    margin-right: auto;
  }

  .back-header-space {
    margin-left: 20px;
  }

  .back-header-outline {
    cursor: pointer;
    outline: none;
  }
}
</style>